<template>
  <div class="show-create-kupono" v-if="props.showDialog">
    <Dialog
      diaTop="1"
      headerName="创建联单"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="80"
      footerTop="10"
      footerBtm="30"
    >
      <template #content>
        <div class="content-wrap">
          <div class="transfor-msg">
            <h3>
              <img src="@/assets/images/sanjiao.png" alt="" />危废转移信息
            </h3>

            <div class="name-val-wrap">
              <ul class="ul">
                <li style="width: 200px">
                  <div class="top-name">危废代码</div>
                  <div class="btm-val">831-001-01</div>
                </li>
                <li style="width: 220px">
                  <div class="top-name">废物名称</div>
                  <div class="btm-val">单位为只的产废</div>
                </li>
                <li style="width: 190px">
                  <div class="top-name">处置方式</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
                <li style="width: 120px">
                  <div class="top-name">库存量</div>
                  <div class="btm-val">10</div>
                </li>
                <li style="width: 160px">
                  <div class="top-name">拟转移量</div>
                  <div class="btm-val">2024</div>
                </li>
                <li style="width: 170px">
                  <div class="top-name">单位</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
                <li style="width: 170px">
                  <div class="top-name">容器类型</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
                <li style="width: 170px">
                  <div class="top-name">规格型号</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
                <li style="width: 170px">
                  <div class="top-name">材质</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
                <li style="width: 170px">
                  <div class="top-name">容器数量</div>
                  <div class="btm-val">
                    <el-select
                      v-model="params.a"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </li>
              </ul>
            </div>
            <div class="btm-wrap">
              <div class="danger-left">
                <div class="left-name">
                  <div class="one" style="width: 100%">主要危险成分：</div>
                  <div class="two">应急措施：</div>
                </div>
                <div class="right-val">
                  <div class="top">
                    <el-input></el-input>
                  </div>
                  <div class="btm">
                    <el-input></el-input>
                  </div>
                </div>
              </div>
              <div class="danger-right">
                <div class="left-name">
                  <div class="one" style="width: 100%">主要危险成分：</div>
                  <div class="two">应急措施：</div>
                </div>
                <div class="right-val">
                  <div class="top">
                    <el-input></el-input>
                  </div>
                  <div class="btm">
                    <el-input></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="transport-unit">
            <h3><img src="@/assets/images/sanjiao.png" alt="" />运输单位</h3>
            <el-button
              type="primary"
              style="margin-left: 24px"
              @click="handleDelete"
              ><el-icon style="color: #fff; margin-right: 5px"><Plus /></el-icon
              >选择</el-button
            >
            <div class="transport-wrap">
              <ul class="one-line">
                <li>
                  <span style="width: 200px">运输单位：</span>
                  <el-input></el-input>
                </li>
                <li><span>运输企业联系人：</span> <el-input></el-input></li>
                <li><span>联系电话：</span> <el-input></el-input></li>
              </ul>
              <ul class="two-line">
                <li>
                  <span style="width: 200px">营业执照：</span>
                  <el-input></el-input>
                </li>
                <li><span>组织机构代码证：</span> <el-input></el-input></li>
                <li><span>运输经营许可证：</span> <el-input></el-input></li>
              </ul>
            </div>
          </div>
          <div class="dispose-unit">
            <h3><img src="@/assets/images/sanjiao.png" alt="" />处置单位</h3>
            <el-button
              type="primary"
              style="margin-left: 24px"
              @click="handleDelete"
              ><el-icon style="color: #fff; margin-right: 5px"><Plus /></el-icon
              >选择</el-button
            >
            <div class="transport-wrap">
              <ul class="one-line">
                <li>
                  <span style="width: 200px">处置单位：</span>
                  <el-input></el-input>
                </li>
                <li><span>处置企业联系人：</span> <el-input></el-input></li>
                <li><span style="width: 330px">联系电话：</span> <el-input></el-input></li>
              </ul>
              <ul class="two-line">
                <li>
                  <span style="width: 200px">营业执照：</span>
                  <el-input></el-input>
                </li>
                <li><span>组织机构代码证：</span> <el-input></el-input></li>
                <li>
                  <span style="width: 330px">危险废物经营许可证：</span>
                  <el-input></el-input>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import Upload from "@/components/Upload";
let props = defineProps(["showDialog", "addOrEditFlag"]);
let emit = defineEmits(["update:showDialog", "save"]);
let params = reactive({});
let formData = reactive({ enterpriseName: "" });

let close = () => {
  console.log("-=-=");
  emit("update:showDialog", false);
};
let save = () => {
  emit("save");
};
let options = ref([{ label: "fds,", value: "2" }]);
let rules = {
  enterpriseName: [
    {
      required: true,
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
};
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.show-create-kupono {
  .content-wrap {
    padding-top: 12px;

    padding-bottom: 20px;
    .dispose-unit {
      .one-line {
       
      }
     
    }
    .transport-unit,
    .dispose-unit {
      border: 1px solid #cccccc;
      margin-top: 15px;
      position: relative;
      :deep(.el-button--primary) {
        position: absolute;
        right: 40px;
        top: 6px;
        width: 107px;
        height: 37px;
        background: #0874fa;
        border-radius: 5px;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 22px;
        color: #ffffff;
      }
      h3 {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        color: #333333;
        display: flex;
        width: 100%;
        height: 50px;
        background: #f1f1f1;
        border-bottom: 1px solid #cccccc;
        align-items: center;
        padding-left: 13px;
        img {
          width: 16px;
          margin-right: 10px;
          height: 22px;
        }
      }
      .transport-wrap {
        width: 100%;
        height: 133px;
        background: #ffffff;

        padding-top: 19px;
        .two-line {
          margin-top: 15px;
        }
        .one-line,
        .two-line {
          display: flex;

          align-items: center;

          padding-right: 40px;
          li {
            display: flex;
            align-items: center;
            span {
              width: 300px;
              height: 20px;
              text-align: right;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 20px;
              color: #000000;
            }
          }
        }
      }
    }
    .transfor-msg {
      border: 1px solid #cccccc;
      .btm-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        padding-left: 22px;
        padding-right: 22px;
        margin-bottom: 11px;
        .danger-right {
          margin-left: 36px;
        }
        .danger-left,
        .danger-right {
          flex: 1;
          display: flex;
          align-items: center;
          height: 110px;
          .left-name {
            display: flex;
            flex-direction: column;
            align-items: center;

            .one {
              background-color: #f9fafe;

              height: 55px;
              background: #f9fafe;
              border: 1px solid #eceeef;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 20px;
              color: #333333;
              display: flex;
              justify-content: center;
              align-items: center;
              border-bottom: none;
            }
            .two {
              background-color: #f9fafe;
              width: 251px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 20px;
              color: #333333;
              height: 55px;
              background: #f9fafe;
              border: 1px solid #eceeef;
              border-bottom: none;
            }
          }
          .right-val {
            height: 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            margin-left: 15px;
            .top {
              height: 55px;
              width: 100%;
            }
            .btm {
              width: 100%;
            }
          }
        }
        /* .danger-right{
            .left-name{
              .one{
                
              }
            }
          } */
      }
      .name-val-wrap {
        padding-left: 22px;
        padding-right: 22px;
        .ul {
          display: flex;
          border: 1px solid #eceeef;
          margin-top: 10px;
          li {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 1px solid #eceeef;
            .top-name {
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 20px;
              color: #333333;
              width: 100%;
              height: 55px;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #f9fafe !important;
            }
            .btm-val {
              height: 60px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #666666;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 15px;
            }
          }
        }
      }
      h3 {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 22px;
        color: #333333;
        display: flex;
        width: 100%;
        height: 50px;
        background: #f1f1f1;
        border-bottom: 1px solid #cccccc;
        align-items: center;
        padding-left: 13px;
        img {
          width: 16px;
          margin-right: 10px;
          height: 22px;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input) {
    width: 100%;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-select) {
    width: 100% !important;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #333;
  }
  :deep(.el-input) {
    width: 100% !important;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
}
</style>
